<template>
  <div>
    <nav>
      <ul>
        <li class="left active">音乐首页</li>
        <li class="left">热门</li>
        <li class="left">推荐</li>
        <li class="right"><el-button type="primary" icon="el-icon-search">搜索</el-button></li>
        <li class="right">注册</li>
        <li class="right">登录</li>
      </ul>
    </nav>
  </div>
</template>

<script>
  export default {
    name: "navbar",
    data() {
      return {
        activeIndex: '1',
        input: '',
        navtitle:['音乐首页','热门','推荐']
      };
    },
    methods: {}
  }
</script>

<style scoped>

  nav > ul {
    background-color: #545c64;
    height: 80px;
    margin: 0;
  }

  nav > ul::after {
    content: '';
    display: block;
    clear: both;
  }

  nav > ul > li {
    padding-right: 20px;
    padding-left: 20px;
    list-style: none;
    width: auto;
    line-height: 75px;
    color: white;
    font-size: 30px;
  }
  .active{
    border-bottom: aqua 5px solid;
    color: aqua;
  }
  .left {
    float: left;
  }
  .right{
    padding: 0 10px;
    font-size: 20px;
    float: right;
  }
</style>
